<template>
  <div id="app">
    <div class="user_message">
      <img class="image" />
      <div class="nick_name">张三</div>
      <img class="search_icon" @click="search()" src="./search.png" />
      <div class="login_out"  @click="logout">{{mobile !== ''? '退出登录' : '登录'}}</div>
    </div>


    <div class="home_image">
      <a-carousel autoplay>
        <div v-for="item in bannerList" :key="item.id">
          <img :src="item.imgUrl"  />
        </div>
      </a-carousel>
    </div>

    <div class="tab_content" v-for="(item,index) in tabData" :key="index">
      <div class="title">{{item.name}}</div>
      <div class="tab_box">
        <div
          class="tab_item"
          v-for="(tabItem,indexlimt) in item.item"
          :key="indexlimt"
          @click="tabSwitch(indexlimt,tabItem.moduleId,index+1)"
        >
          <img class="tab_item_image" :src="tabItem.iconUrl" />
          <div class="item_title">{{tabItem.name}}</div>
        </div>
      </div>
    </div>

    <!-- <img class="banner_mid" /> -->
    <div class="home_image">
      <a-carousel autoplay>
        <div v-for="item in focusList" :key="item.id">
          <img :src="item.imgUrl"  />
        </div>
      </a-carousel>
    </div>

    <div class="star_linearLayout">
      <div class="title">明星风彩</div>
      <div class="title_more" @click="tabSwitch(0,starData[0].moduleId,4)">查看全部</div>
      <img class="icon_more" src="./right_icon.png" />
    </div>

    <div class="star_box">
      <div
        class="star_item"
        v-for="(item,index) in starData"
        :key="index"
        @click="tabSwitch(index,item.moduleId,4)"
      >
        <img class="item_image" :src="item.iconUrl" />
        <div class="item_title">{{item.name}}</div>
      </div>
    </div>

    <div class="star_linearLayout">
      <div class="title">内部分享</div>
      <div class="title_more" @click="tabSwitch(0,id,6)">查看全部</div>
      <img class="icon_more" src="./right_icon.png" />
    </div>

    <div class="share_box">
      <div
        class="share_item"
        v-for="(item,index) in shareData"
        :key="index"
        @click="tabSwitch(item.id,item.moduleId,5)"
      >
        <img class="share_image" :src="item.coverUrl" />
        <div class="share_title">{{item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as dd from 'dingtalk-jsapi'

export default {
  name: 'index',
  data() {
    return {
      tabData: [
        {
          name: '业绩为王',
          item: []
        },
        { name: '形象之星', item: [] },
        { name: '江南加油站', item: [] }
      ],
      starData: [],
      shareData: [{ title: '团队风采标题', src: '' }],
      bannerList: [],
      focusList: [],
      id: '',
      mobile: '',
    }
  },

  mounted() {
    let that = this
    that.homeInfo()
    that.internalSharingList()
    dd.ready(function () {
      dd.runtime.permission
        .requestAuthCode({
          corpId: 'ding8bac6beff1d2d841', // 企业id
          onSuccess: function (info) {
            let code = info.code // 通过该免登授权码可以获取用户手机号码
            that
              .$http({
                url: '/api/gateway/basemgt-emp/login/dingtalk',
                method: 'post',
                data: {
                  code: code,
                  agentId: '2230237918',
                }
              })
              .then(data => {
                if (data.success) {
                  that.checkUser(data.data.mobile)
                } else {
                  that.$toast(data.msg)
                }
              })
          },
          onFail: function (err) {}
        })
        .catch(err => {
          console.log(err)
          alert(err)
        })
    })

  },
  computed: {},
  created: function() {
    // document.title = '员工福利'
  },
  methods: {
    search() {
      this.$router.push({ path: 'searchView' })
    },


    checkUser(mobile){
      this.$http({
      url: 'https://testbzhz.jnbygroup.com/api/gateway/dealer-center/dealer/checkUser',
      method: 'post',
      params: {
        tel: mobile,
      },
      data: {
        tel: mobile
      }
    }).then(data => {
      if (data.code == 200) {
        localStorage.setItem('linkid', mobile)
        this.mobile = mobile
      } else {
        this.$toast(data.msg)
      }
    })
    },

    tabSwitch(indexlimit, id, tag) {
      console.log(indexlimit, id, tag)
      console.log(localStorage.getItem('linkid'));
      if (this.mobile == '') return
      let path = ''
      switch (tag) {
        case 1:
          path = 'performanceTop'
          break
        case 2:
          path = 'visualStar'
          break
        case 3:
          path = 'jnbyMessage'
          break
        case 4:
          path = 'starLight'
          break
        case 5:
          path = 'shareInfo'
          break
        case 6:
          path = 'shareInfo'
          break
      }
      if (tag == 5) this.$router.push({ path: 'detailsView', query: { cid: indexlimit } })
      else this.$router.push({ path: path, query: { index: indexlimit, tid: id } })
    },

    internalSharingList() {
      const that = this
      this.$http({
        // url: 'https://testbzhz.jnbygroup.com/api/gateway/dealer-center/dealer/internalSharingList',
        url: '/api/gateway/dealer-center/dealer/internalSharingList',
        method: 'get'
      }).then(data => {
        if (data.code == 200) {
          that.shareData = data.data

          //   starData: [],
          // shareData: [{ title: '团队风采标题', src: '' }]
          // console.log(data)
        } else {
          this.$toast(data.msg)
        }
      })
    },

    homeInfo() {
      const that = this
      this.$http({
        url: 'https://testbzhz.jnbygroup.com/api/gateway/dealer-center/dealer/homeInfo',
        method: 'get'
      }).then(data => {
        if (data.code == 200) {
          let tabDataCopy = that.tabData
          tabDataCopy[0].item = data.data.kingOfPerformance
          tabDataCopy[1].item = data.data.imageStar
          tabDataCopy[2].item = data.data.jiangnanGasStation
          that.tabData = tabDataCopy

          that.starData = data.data.starSharing
          that.bannerList = data.data.bannerList
          that.focusList = data.data.focusList
          that.id = data.data.internalSharing[0].moduleId
          //   starData: [],
          // shareData: [{ title: '团队风采标题', src: '' }]
          // console.log(data)
        } else {
          this.$toast(data.msg)
        }
      })
    },
    logout() {
      localStorage.setItem('linkid', '')
      this.mobile = ''
    }
  }
}
</script>
<style scoped lang="less">
#app {
  height: 100vh;
}

.user_message {
  padding-top: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  height: 30px;
}

.user_message .image {
  width: 30px;
  height: 30px;
  margin-left: 15px;
  // background: #327542;
}

.user_message .nick_name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  margin-left: 8px;
}

.user_message .search_icon {
  width: 20px;
  height: 20px;
  margin-right: 16px;
}

.user_message .login_out {
  margin-right: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #327542;
}

.home_image {
  height: 140px;
  width: 92%;
  margin-left: 4%;
  margin-top: 16px;
  border-radius: 8px;
  img {
    height: 140px;
    width: 100%;
  }
}

.tab_content {
  width: 100%;
}

.tab_content .title {
  margin-top: 10px;
  line-height: 34px;
  margin-left: 4%;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #424959;
}

.tab_box {
  display: flex;
  align-items: center;
  width: 92%;
  margin-left: 4%;
  margin-top: 5px;
  overflow: auto;
  flex-wrap: wrap;
}

.tab_item {
  width: 23vw;
  height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tab_item_image {
  width: 20px;
  height: 20px;
}

.item_title {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 500;
  color: #424959;
}

.banner_mid {
  width: 100%;
  height: 100px;
  margin-top: 15px;
}

.star_linearLayout {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 15px;
  height: 35px;
}

.star_linearLayout .title {
  margin-left: 4%;
  font-size: 16px;
  font-weight: 500;
  color: #424959;
  line-height: 34px;
  flex: 1;
}

.title_more {
  font-size: 12px;
  font-weight: 400;
  color: #99999a;
}

.icon_more {
  /* margin-top: 5px; */
  width: 16px;
  height: 16px;
  margin-right: 4%;
  margin-left: 3px;
}

.star_box {
  width: 92%;
  margin-left: 4%;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  // justify-content: space-around;
  
}

.star_item {
  // width: 22%;
  text-align: center;
  height: 95px;
  width: 23vw;
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.item_image {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 90px;
}

.item_title {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #424959;
}

.share_box {
  margin-left: 4%;
  margin-top: 5px;
  width: 94%;
  overflow: scroll;
  display: flex;
}

.share_item {
  margin-right: 10px;
  width: 160px;
}

.share_image {
  width: 160px;
  height: 90px;
  overflow: hidden;
  border-radius: 8px;
}

.share_title {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #424959;
}

/* <div id="app">
   
    <div class="star_linearLayout">
      <div class="title">明星风彩</div>
      <div class="title_more">查看更多</div>
      <img class="icon_more" />
    </div>

    <div class="star_box">
      <div class="star_item" v-for="(item,index) in starData" :key="index">
        <img class="item_image" />
        <div class="item_title">合作伙伴</div>
      </div>
    </div>

    <div class="share_box">
      <div class="share_item" v-for="(item,index) in shareData" :key="index">
        <img class="share_image" />
        <div class="share_title">团队风采标题</div>
      </div>
    </div>
  </div> */
</style>